<template>
  <div class="dashboard">
    <el-row :gutter="16">
      <el-col :xs="24" :lg="16">
        <doc-upload-form />
        <doc-search-panel />
      </el-col>
      <el-col :xs="24" :lg="8">
        <settings-panel class="section-card" />
        <icon-gallery class="section-card" />
      </el-col>
    </el-row>

    <el-row :gutter="16">
      <el-col :xs="24" :lg="16">
        <doc-list />
      </el-col>
      <el-col :xs="24" :lg="8">
        <ai-console />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import DocUploadForm from '@/components/docs/DocUploadForm.vue';
import DocList from '@/components/docs/DocList.vue';
import DocSearchPanel from '@/components/docs/DocSearchPanel.vue';
import AiConsole from '@/components/ai/AiConsole.vue';
import IconGallery from '@/components/icons/IconGallery.vue';
import SettingsPanel from '@/views/components/SettingsPanel.vue';
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style>
